import React from "react"
import AreaPicker from '@/components/Area/AreaPicker'
import styles from '@/assets/css/profile.module.css'

export default () => {
    const [form] = React.UI.Form.useForm()

    let [business, SetBusiness] = useState({
        ...React.business,
        active: [React.business.province, React.business.city, React.business.district],
        code: React.business.district || React.business.city || React.business.province
    })

    let [avatar, SetAvatar] = useState([
        {url: business.avatar_text}
    ])

    let [areaShow, SetAreaShow] = useState(false)

    // 头像上传
    const UploadAvatar = (file: any): any => {
        // 将图片覆盖到business上
        SetBusiness({
            ...business,
            avatar: file
        })

        return {url: URL.createObjectURL(file)}
    }

    // 地区选择
    const AreaConfirm = (val: any[], list: any[]) => {
        SetAreaShow(false)

        let code = ''
        let region_text = ''

        for(let item of val)
        {
            if(item) code = item
        }

        if(list[0]) region_text += `${list[0]}`
        if(list[1]) region_text += `-${list[1]}`
        if(list[2]) region_text += `-${list[2]}`

        // 修改表单数据
        form.setFieldsValue({
            region_text: region_text,
            code: code
        })
    }

    const Submit = async (values: (object | any)) => {
        values.id = business.id

        if(business.avatar) values.avatar = business.avatar

        // 获取到选择的地区码
        if(form.getFieldValue('code')) values.code = form.getFieldValue('code')

        // 判断是否有输入密码
        if(!values.password) delete values.password

        let result = await React.request.upload('/business/UserProfile', values)

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail')
            return false
        }

        React.toast(result.msg, 'success', () => {
            React.cookies.save('business', result.data, {path: '/'})

            React.business = result.data

            React.navigate(-1)
        })
    }


    return (
        <>
            <div className={styles.header}>
                <React.UI.NavBar back="返回" onBack={() => React.navigate(-1)}>个人资料</React.UI.NavBar>
            </div>

            {/* 地区组件 */}
            <AreaPicker active={business.active} visible={areaShow} onClose={() => SetAreaShow(false)} onConfirm={AreaConfirm}/>

            <div className={styles.form}>
                <React.UI.Form
                    name='profile'
                    layout='horizontal'
                    mode='card'
                    form={form}
                    initialValues={business}
                    onFinish={Submit}
                    footer={
                        <React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>
                    }
                    
                >
                    {/* 头像 */}
                    <React.UI.AutoCenter style={{margin: '30px 0px 30px 30px'}}>
                        <React.UI.ImageUploader value={avatar} onChange={SetAvatar} maxCount={1} upload={UploadAvatar} />
                    </React.UI.AutoCenter>

                    <React.UI.Form.Item name="nickname" label="昵称" rules={[{required: true, message: '请输入昵称'}]}>
                        <React.UI.Input placeholder="请输入昵称" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item
                        name='mobile'
                        label="手机号码"
                        rules={[
                            {required: true, message: '请填写手机号码'},
                            {pattern: /^1[356789]\d{9}$/, message: '请输入正确格式的手机号码'}
                        ]}
                    >
                        <React.UI.Input placeholder="请输入手机号码" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item name="password" label="密码">
                        <React.UI.Input type="password" placeholder="请输入密码" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item name="email" label="邮箱" rules={[{ required: true }, { pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对' }]}>
                        <React.UI.Input placeholder="请输入邮箱" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                        <React.UI.Radio.Group>
                            <React.UI.Space direction='horizontal'>
                                <React.UI.Radio value='0'>保密</React.UI.Radio>
                                <React.UI.Radio value='1'>男</React.UI.Radio>
                                <React.UI.Radio value='2'>女</React.UI.Radio>
                            </React.UI.Space>
                        </React.UI.Radio.Group>
                    </React.UI.Form.Item>

                    {/* 地区 */}
                    <React.UI.Form.Item name="region_text" label="地区" onClick={() => SetAreaShow(true)}>
                        <React.UI.Input placeholder="请选择地区" readOnly  />
                    </React.UI.Form.Item>

                </React.UI.Form>
            </div>
        
        </>


    )
}